<template>
  <!-- <h2>数据来源统计</h2> -->
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm"  :inline="true">
      <el-form-item label="日期">
        <el-date-picker style="width: 240px" v-model="daterange" type="daterange" value-format="yyyy-MM-dd" format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
      </el-form-item>

      <el-form-item label="门类">
        <el-select v-model="queryParams.ids" placeholder="请选择" clearable style="width: 240px">
          <el-option v-for="item in categoryIdOption" :key="item.value" :label="item.label"
                     :value="item.value" />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-s-data"  @click="count">统计</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8" ref="refbut">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-download"  @click="exportExcel">导出</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-printer"  @click="print">打印</el-button>
      </el-col>
    </el-row>

    <div style="width: 70%; margin: 0 auto;">
      <table class="custom-table">
        <thead>
        <tr class="title">
          <th colspan="13" style="border: 0 !important;">
            <h1 style="font-size: 28px;" class="h1">
              数据来源统计表
            </h1>
          </th>
        </tr>
        <tr class="dates">
          <th colspan="13" style="border: 0 !important;">
            <h3 style="font-size: 20px;" class="h3">
              {{ dates }}
            </h3>
          </th>
        </tr>
        <tr>
          <th rowspan="2">档案门类</th>
          <th colspan="4">离线接收</th>
          <th colspan="4">在线接收</th>
          <th colspan="4">档案接收</th>
        </tr>
        <tr>
          <th>项目级目录数</th>
          <th>案卷级目录数</th>
          <th>卷内件级目录数</th>
          <th>电子文件数量</th>
          <th>项目级目录数</th>
          <th>案卷级目录数</th>
          <th>卷内件级目录数</th>
          <th>电子文件数量</th>
          <th>项目级目录数</th>
          <th>案卷级目录数</th>
          <th>卷内件级目录数</th>
          <th>电子文件数量</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item, index) in tableData" :key="item.id">
          <td>{{ item['name'] }}</td>
          <td>{{ item['xm-lx'] }}</td>
          <td>{{ item['juan-lx'] }}</td>
          <td>{{ item['jian-lx'] }}</td>
          <td>{{ item['file-lx'] }}</td>
          <td>{{ item['xm-zx'] }}</td>
          <td>{{ item['juan-zx'] }}</td>
          <td>{{ item['jian-zx'] }}</td>
          <td>{{ item['file-zx'] }}</td>
          <td>{{ item['xm-da'] }}</td>
          <td>{{ item['juan-da'] }}</td>
          <td>{{ item['jian-da'] }}</td>
          <td>{{ item['file-da'] }}</td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import {getcategory, getTjTable} from "@/api/archive/statistics/dataSourceStatistics/dataSourceStatistics";
import * as XLSX from "xlsx";

export default {
  name: "index",
  data() {
    return {
      queryParams: {
        startTime: '',
        endTime: '',
        ids: ''
      },
      daterange: [],
      categoryIdOption: [],
      date: "",
      dates: "",
      // 统计表格数据
      tableData: [],
    }
  },
  created() {
    this.getCategoryId()
    const now = new Date();
    const currentYear = now.getFullYear();
    // this.time = currentYear

    const currentMonth = String(now.getMonth() + 1).padStart(2, '0');
    const currentDate = String(now.getDate()).padStart(2, '0');
    this.date = currentYear + "年" + currentMonth + "月" + currentDate + "日"
    this.getList()
  },
  methods: {
    // 门类
    getCategoryId() {
      getcategory().then(response => {
        this.categoryIdOption = response.data.map(item => {
          return {
            value: item.ID,
            label: item.NAME
          }
        })
      })
    },
    getList() {
      this.dates = "制表日期：" + this.date
      if (this.daterange != null) {
        if(this.daterange.length != 0) {
          this.queryParams.startTime = this.daterange[0].toString()
          this.queryParams.endTime = this.daterange[1].toString()
        }
      } else {
        this.queryParams.startTime = ''
        this.queryParams.endTime = ''
      }
      getTjTable(this.queryParams).then(res=>{
        this.tableData = res.data
        const sum = res.data.reduce((acc, obj) => {
          const sumXmLx = parseInt(obj["xm-lx"]);
          const sumJuanLx = parseInt(obj["juan-lx"]);
          const sumJianLx = parseInt(obj["jian-lx"]);
          const sumFileLx = parseInt(obj["file-lx"]);
          const sumXmZx = parseInt(obj["xm-zx"]);
          const sumJuanZx = parseInt(obj["juan-zx"]);
          const sumJianZx = parseInt(obj["jian-zx"]);
          const sumFileZx = parseInt(obj["file-zx"]);
          const sumXmDa = parseInt(obj["xm-da"]);
          const sumJuanDa = parseInt(obj["juan-da"]);
          const sumJianDa = parseInt(obj["jian-da"]);
          const sumFileDa = parseInt(obj["file-da"]);

          return {
            'xm-lx': acc['xm-lx'] + sumXmLx,
            'juan-lx': acc['juan-lx'] + sumJuanLx,
            'jian-lx': acc['jian-lx'] + sumJianLx,
            'file-lx': acc['file-lx'] + sumFileLx,
            'xm-zx': acc['xm-zx'] + sumXmZx,
            'juan-zx': acc['juan-zx'] + sumJuanZx,
            'jian-zx': acc['jian-zx'] + sumJianZx,
            'file-zx': acc['file-zx'] + sumFileZx,
            'xm-da': acc['xm-da'] + sumXmDa,
            'juan-da': acc['juan-da'] + sumJuanDa,
            'jian-da': acc['jian-da'] + sumJianDa,
            'file-da': acc['file-da'] + sumFileDa
          };
        }, { 'xm-lx': 0, 'juan-lx': 0, 'jian-lx': 0, 'file-lx': 0,
          'xm-zx': 0, 'juan-zx': 0, 'jian-zx': 0, 'file-zx': 0,
          'xm-da': 0, 'juan-da': 0, 'jian-da': 0, 'file-da': 0 });
        sum['name'] = '合计'
        this.tableData.push(sum)
      })
    },
    // 统计
    count() {
      this.getList()
    },


    // 导出
    exportExcel() {
      const worksheet = XLSX.utils.table_to_sheet(document.querySelector('.custom-table'));
      const workbook = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');

      // console.log(worksheet)
      const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
      this.saveAsExcel(excelBuffer, `数据来源统计_${new Date().getTime()}`);
    },

    saveAsExcel(buffer, filename) {
      const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
      const link = document.createElement('a');
      link.href = URL.createObjectURL(blob);
      link.download = `${filename}.xlsx`;
      link.click();
    },

    // 打印
    print() {
      const tableElement = document.querySelector('.custom-table');
      const iframe = document.createElement('iframe');
      iframe.style.display = 'none';
      document.body.appendChild(iframe);
      const iframeDoc = iframe.contentWindow.document;

      iframeDoc.open();
      iframeDoc.write(`
          <html>
          <head>
<!--            <title>打印表单</title>-->
            <style>
              @media print {
                .h1 {
                  font-size: 28px;
                  text-align: center;
                }

                .h3 {
                  font-size: 20px;
                  text-align: right;
                }

                .table {
                  margin-top: 5px;
                  padding: 1%;
                }
                .custom-table {
                  width: 100%; /* 设置表格宽度为100% */
                  margin: 0 auto;
                  border-collapse: collapse; /* 合并单元格边框 */
                }

                .custom-table th,
                .custom-table td {
                  padding: 8px; /* 设置单元格内边距 */
                  padding:5px 5px 5px 5px;
                  align-items:center;
                  justify-content:flex-start;
                  opacity:1;
                  color:#000000;
                  letter-spacing:2px;
                  font-family:仿宋;
                  font-size:16px;
                  border: 1px solid #000; /* 设置单元格边框样式 */
                  padding: 8px; /* 设置单元格内边距 */
                  text-align: center; /* 设置单元格文本居中 */
                }

                .title {
                  heigth: 5em;
                  line-height: 5em;
                  text-align: center;
                  padding:5px 5px 5px 5px;
                  align-items:center;
                  justify-content:center;
                  letter-spacing:4px;
                  font-weight:bold;
                  font-family:宋体;
                  font-size:24px;
                  opacity:1;
                  margin: 0 auto;
                  background:rgba(255, 255, 255, 0) !important;
                  border: 0 !important;
                  box-shadow:0 0 0 0 rgba(255, 255, 255, 0) !important;
                }

                .dates {
                  text-align: right;
                }
              }
            </style>
          </head>
          <body>
             ${tableElement.outerHTML}
            <script>
              window.onload = function() {
                window.print();
                window.close();
              }
            <\/script>
          </body>
          </html>
      `);
      iframeDoc.close();
    },
  },
}
</script>

<style lang="scss" scoped>
.h1 {
  font-size: 28px;
  text-align: center;
}

.h3 {
  font-size: 20px;
  text-align: right;
}

.table {
  margin-top: 5px;
  padding: 1%;
}
.custom-table {
  width: 100%; /* 设置表格宽度为100% */
  margin: 0 auto;
  border-collapse: collapse; /* 合并单元格边框 */
}

.custom-table th,
.custom-table td {
  padding: 8px; /* 设置单元格内边距 */
  padding:5px 5px 5px 5px;
  align-items:center;
  justify-content:flex-start;
  opacity:1;
  color:#000000;
  letter-spacing:2px;
  font-family:仿宋;
  font-size:16px;
  border: 1px solid #000; /* 设置单元格边框样式 */
  padding: 8px; /* 设置单元格内边距 */
  text-align: center; /* 设置单元格文本居中 */
}

.title {
  heigth: 5em;
  line-height: 5em;
  text-align: center;
  padding:5px 5px 5px 5px;
  align-items:center;
  justify-content:center;
  letter-spacing:4px;
  font-weight:bold;
  font-family:宋体;
  font-size:24px;
  opacity:1;
  margin: 0 auto;
  background:rgba(255, 255, 255, 0) !important;
  border: 0 !important;
  box-shadow:0 0 0 0 rgba(255, 255, 255, 0) !important;
}

.dates {
  text-align: right;
}
</style>
